<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./vue.js"></script>
</head>
<body>
<button onclick="my()">销毁</button>
<div id="root">
  <button @click="isShow=!isShow">销毁</button>
  <child v-if="isShow"></child>
</div>
</body>
<script>
  function my(){
    vm.$destroy();
  }
  const vm = new Vue({
    el: "#root",
    data:{
      isShow:true
    },
    components:{
      Child:{
        template:(`
			        <button ref="btn" @click="fn">{{count}}</button>
			    `),
        data(){
          return {
            count:100
          }
        },
        methods:{
          fn(){
            this.$destroy();
          }

        },
        mounted(){
          this.timer = setInterval(()=>{
            this.count++
            console.log(this.count)
          },1000)
        },
        beforeDestroy(){
          console.log("1-beforeDestroy",this.$refs.btn);
          clearInterval(this.timer);
        },
        destroyed(){
          console.log("2- destroyed",this.$refs.btn)
        },
        beforeCreate() {
          console.log("beforeCreate");
        },
        created(){
          console.log("created");
        },
        beforeMount(){
          console.log("beforeMount");
        }
      }

    }
  })
</script>
</html>